<template>
    <div class="box">
        <topLog></topLog>
        <div class="content">
            <div class="title">
                <div class="title-left">
                    <div class="work-title">{{branchWork.title}}</div>
                    <div class="original">
                        <span>原创</span>
                        <span>{{firstBranch}}</span>
                        <span>{{secondBranch.navigation}}</span>
                    </div>
                    <el-breadcrumb separator="|">
                        <el-breadcrumb-item>
                            <span class="number">{{branchWork.star}}</span>
                            赞</el-breadcrumb-item>
                        <el-breadcrumb-item>
                            <span class="number">{{commentList.length}}</span>
                            评论</el-breadcrumb-item>
                        <el-breadcrumb-item>{{branchWork.creTime}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="title-right">
                    <el-avatar shape="circle" :size="50" fit="fit" style="width:50px;background: cornflowerblue; font-family: cursive;">{{secondBranch.navigation}}</el-avatar>
                </div>
            </div>
            <!-- 正文 -->
            <div class="bigcontent">
                <div class="realContent" v-html="content"></div>
            </div>
            <!-- 留言 -->
            <el-row type="flex" justify="center">
                <el-col :span="20">
                    <div class="leave-message" id="lMessage">
                        <div class="message-title">
                            {{'留言板' + '(' + commentList.length + ')'}}
                        </div>
                        <div class="certain-message">
                           <el-avatar shape="circle" fit="fit" icon="el-icon-s-order" ></el-avatar>
                           <el-form class="form-message">
                                <el-form-item>
                                    <el-input type="textarea" v-model="leaveMessage"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">立即留言</el-button>
                                </el-form-item>
                                <div class="leaveItems">
                                    <ul>
                                        <li class="leaveitem" v-for="(item, index) in commentList" :key="index">
                                            <div class="userName">
                                                <el-avatar shape="circle" fit="fit" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" ></el-avatar>
                                                <span style="margin-left:10px">用户:{{userIp}}</span>
                                            </div>
                                            <div>{{item.comDescription}}</div>
                                            <div class="message-dianzan">
                                                <span class="iconfont icon-dianzan" @click="plStar(item.comId)"></span>
                                                <span class="dianzanNums">{{item.other}}</span><span>{{item.creTime | formatDate}}</span>
                                            </div>
                                            <el-divider></el-divider>
                                        </li>
                                    </ul>
                                </div>
                           </el-form>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 点赞评论 -->
        <div class="right-float">
            <div class="items">
                <el-badge :value="branchWork.star" class="item">
                    <span class="iconfont icon-dianzan" @click="thumbsUp" :class="{changeColor}"></span>
                </el-badge>
                <span class="iconfont icon-pinglunxuanzhong" @click="comment"></span>
                <div class="share" :data-clipboard-text='href' @click="share">
                    <span class="iconfont icon-zhuanfa"></span>
                </div>
                <span class="iconfont icon-erweima" @click="openCode"></span>
            </div>
        </div>
       <Footer></Footer>
       <el-backtop :visibility-height="200" :right="10">
           <div class="triangle"></div>
       </el-backtop>
    </div>
</template>


<script>
import topLog from '../../components/top-logo.vue'
import Footer from '../../components/footer.vue'
import Clipboard from 'clipboard'
// import func from 'vue-editor-bridge'
export default {
    components: {
        topLog,
        Footer
    },
    data() {
        return {
            firstBranch: '',
            secondBranch: {},
            content: '',
            branchWork: {},
            changeColor: false,
            timer: null,
            preTime: 0,
            leaveMessage: '',
            userIp: localStorage.getItem('userIp'),
            queryInfo: {
                page: 1,  // 页数
                size: 100000, // 条数
            },
            commentList: [],
            href: '',
            filePath: ''
        }
    },
    mounted() {
        this.getSecondNavigation()
        this.getBranchWork()
        this.allMessage()
        this.getContent()
        this.getIpStart()
        this.qrCode()
    },
    methods: {
        getContent() {
            this.$http.get(this.$api.workContent + this.$route.query.desId)
            .then(res => {
                if(res.data.status === 20000) {
                    this.content = res.data.data.description.content
                }
            })
            .catch(error => {
                console.log(error);
            })
        },
        // 获取当前ip是否点赞
        getIpStart() {
            this.$http.get(this.$api.getIpStart + '/' + returnCitySN.cip)
            .then(res => {
                if(res.data.status === 20000) {
                    res.data.data.list.map((value, index) => {
                        if(value === this.$route.query.workId) {
                            this.changeColor = true
                        }
                    })
                }
            })
            .catch(err => {
                console.log(err);
            })
        },
        // 点赞
        thumbsUp() {
            this.throttle(500)
        },
        thumb() {
            if(this.changeColor) {
                this.$message.warning('您已点赞过该作品')
            }else {
                this.$http.put(this.$api.start + this.$route.query.workId + '/' + returnCitySN.cip)
                .then(res => {
                    if(res.data.status === 20000) {
                        this.$store.state.titleItems.star++
                        this.changeColor = !this.changeColor
                        this.getBranchWork()
                    }
                })
                .catch(error => {
                    console.log(error);
                })
            }

            console.log(123);
        },
        // 节流
        throttle(wait) {
            let nowTime = Date.now()
            console.log(nowTime);
            let dValue = nowTime - this.preTime
            this.preTime = nowTime
            if(dValue >= wait) {
                console.log("差值" + dValue);
                this.timer = setTimeout(() => {
                this.thumb()
                }, wait)
            }else {
                console.log("节流开启");
            }
        },
        // 分享
        share(){
            let href = window.location.href
            this.href = href
            var clipboard = new Clipboard('.share')
            clipboard.on('success', e => {
                this.$message.success('复制链接成功')
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                // 不支持复制
                this.$message.error('该浏览器不支持自动复制')
                // 释放内存
                clipboard.destroy()
            })
        },
        // 评论
        comment() {
            // 获取点击的按钮对应页面的id
            var PageId = document.querySelector('#lMessage')
            window.scrollTo({
                'top': PageId.getBoundingClientRect().top, // 获取元素到浏览器顶部的距离
                'behavior': 'smooth'
            })
        },
        // 留言
        onSubmit() {
            let params = {
                comDescription: this.leaveMessage,
                targetId: this.$route.query.workId
            }
            this.$http.post(this.$api.addMessage, params)
            .then(res => {
                console.log(res);
                if(res.data.status === 20000) {
                    this.leaveMessage = ''
                    this.allMessage()
                }
            })
            .catch(error => {
                console.log(error);
            })
        },
        // 调用全部留言
        allMessage() {
            this.$http.get(this.$api.getMessage + `?id=` + this.$route.query.workId, {params: this.queryInfo})
            .then(res => {
                if(res.data.status === 20000) {
                    this.commentList = res.data.data.commentList.reverse()
                    console.log(this.commentList);
                }
            })
            .catch(error => {
                console.log(error);
            })
        },
        // 留言点赞
        plStar(comId) {
            this.$http.put(this.$api.messageStar + comId + '/' + returnCitySN.cip)
            .then(res => {
                if(res.data.status === 20000) {
                    this.allMessage()
                }
            })
            .catch(error => {
                console.log(error);
            })
        },
        getSecondNavigation() {
            this.$http.get(this.$api.secondNavigation)
            .then(res => {
                if(res.data.status === 20000) {
                    res.data.data.navigation.map((value, index) => {
                        if(value.navId === this.$route.query.firstId) {
                            this.firstBranch = value.navigation
                            value.deps.map((currentValue, currentIndex) => {
                                if(currentValue.navId === this.$route.query.secondId) {
                                    this.secondBranch = currentValue
                                }
                            })
                        }
                    })
                }
            })
            .catch(error => {
                console.log(error);
            })
        },
        getBranchWork() {
            this.$http.get(this.$api.branchList + this.$route.query.secondId, {params: this.queryInfo}) 
            .then((res) => {
                if(res.data.status === 20000) {
                    console.log(res.data.data.records);
                    res.data.data.records.map((value, index) => {
                        if(value.id === this.$route.query.workId) {
                            this.branchWork = value
                        }
                    })
                }
            })
            .catch((err) => {
                console.log(err);
            })
        },
        // 获取二维码
        qrCode() {
            let href = window.location.href
            this.$http.get(this.$api.getCode + '?url=' + href, {responseType: 'arraybuffer'})
            .then(res => {
                this.filePath = 'data:image/png;base64,' 
                    + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
                console.log(res);
            })
            .catch(error => {
                console.log(error);
            })
        },
        openCode() {
            this.$alert('<img src = '+  this.filePath +' />', '扫码观看', {
                center: true,
                dangerouslyUseHTMLString: true
            });
        }
    },
}
</script>

<style lang="less" scoped>
.content {
    .title{
        padding: 30px;
        border-bottom: 1px solid #ececec;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-left {
            .work-title {
                text-align: left;
                font-size: 21px;
                font-weight: 400;
            }
            .original {
                text-align: left;
                margin-top: 10px;
                span{
                    background: #409eff;
                    color: white;
                    padding: 3px;
                    border-radius: 3px;
                    line-height: 25px;
                }
                span:nth-child(1) {
                    margin-right: 8px;
                }
                span:nth-child(2) {
                    background: #86b9ed;
                    margin-right: 14px;
                }
                span:nth-child(3) {
                    background: #ffff;
                    color: #8c8f93;
                }
            }
            .number {
                color: #10efda;
            }
        }
    }
    .leave-message {
        background: #ebeaea;
        margin-top: 30px;
        padding: 10px 20px;
        .message-title {
            text-align: left;
            font-size: 16px;
            margin-bottom: 15px;
        }
        .certain-message {
            display: flex;
            .form-message {
                flex: 1;
                margin-left: 15px;
                .leaveItems {
                    padding: 10px 0;
                    background: white;
                    ul {
                        list-style: none;
                        padding: 0 10px;
                        .leaveitem {
                            display: flex;
                            flex-flow: column;
                            align-items: flex-start;
                            .userName {
                                display: flex;
                                align-items: center;
                                margin-bottom: 3px;
                            }
                            .message-dianzan {
                                color: #bfbfbf;
                            }
                            .dianzanNums {
                                margin: 0 5px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.right-float {
    position: fixed;
    left: 2px;
    top: 50%;
    .items {
        display: flex;
        flex-flow: column;
        margin-left: 1px;
        span {
            cursor: pointer;
            margin-top: 20px;
            color: #bfbfbf;
            font-size: 25px;
        }
        span:hover {
            color: #66b1ff;
        }
        .share {
            position: relative;
            margin-top: 20px;
        }
        .changeColor {
            color: #66b1ff;
        }
    }
}
.triangle {
    width:0px;
    height:0px;
    margin-bottom: 10px;
    border-top:8px solid rgba(0,0,0,0);
    border-right:8px solid  rgba(0,0,0,0);
    border-bottom:8px solid #66b1ff;
    border-left:8px solid  rgba(0,0,0,0);
}
.content /deep/ .el-breadcrumb{
    margin-top: 13px;
}
.content /deep/ .el-breadcrumb {
    font-size: 12px;
}
.form-message /deep/ .el-textarea__inner {
    border-radius: 0;
}
.form-message /deep/ .el-form-item__content {
    display: flex;
    justify-content: end;
}
.bigcontent /deep/ img{
    width: 100%;
}
</style>